import React, { useState } from 'react';
import { Camera, CheckCircle, XCircle, User, Phone, Clock, MessageSquare, AlertTriangle } from 'lucide-react';

interface VisitorInfo {
  id: string;
  name: string;
  phone: string;
  visitedPerson: string;
  visitedPhone: string;
  visitTime: string;
  purpose: string;
  isSpecial: boolean;
  specialType?: string;
}

export const QrCodeScanner: React.FC = () => {
  const [isScanning, setIsScanning] = useState(false);
  const [visitorInfo, setVisitorInfo] = useState<VisitorInfo | null>(null);
  const [rejectReason, setRejectReason] = useState('');
  const [showRejectModal, setShowRejectModal] = useState(false);

  // Mock visitor data
  const mockVisitor: VisitorInfo = {
    id: 'V20241201001',
    name: '王小明',
    phone: '13812345678',
    visitedPerson: '李医生',
    visitedPhone: '13987654321',
    visitTime: '2024-12-01 14:30',
    purpose: '业务洽谈',
    isSpecial: true,
    specialType: 'VIP'
  };

  const handleScan = () => {
    setIsScanning(true);
    // Simulate scanning delay
    setTimeout(() => {
      setVisitorInfo(mockVisitor);
      setIsScanning(false);
    }, 2000);
  };

  const handleApprove = () => {
    if (!visitorInfo) return;
    
    // Record approval
    const record = {
      visitorId: visitorInfo.id,
      result: 'approved',
      guardId: 'g1',
      verifyTime: new Date().toISOString(),
      reason: ''
    };
    
    console.log('Approved:', record);
    setVisitorInfo(null);
    // Show success message
  };

  const handleReject = () => {
    if (!rejectReason.trim()) {
      alert('请填写拒绝原因');
      return;
    }

    if (!visitorInfo) return;
    
    // Record rejection
    const record = {
      visitorId: visitorInfo.id,
      result: 'rejected',
      guardId: 'g1',
      verifyTime: new Date().toISOString(),
      reason: rejectReason
    };
    
    console.log('Rejected:', record);
    setVisitorInfo(null);
    setShowRejectModal(false);
    setRejectReason('');
    // Show success message
  };

  return (
    <div className="max-w-4xl mx-auto">
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm">
        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">二维码核验</h2>
          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
            请使用PDA或闸机摄像头扫描访客二维码进行核验
          </p>
        </div>

        <div className="p-6">
          {!visitorInfo ? (
            <div className="text-center py-12">
              <div className="mb-6">
                <div className="mx-auto h-24 w-24 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
                  <Camera className="h-12 w-12 text-blue-600 dark:text-blue-400" />
                </div>
              </div>
              <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
                准备扫描二维码
              </h3>
              <p className="text-gray-600 dark:text-gray-400 mb-6">
                点击下方按钮开始扫描访客二维码
              </p>
              <button
                onClick={handleScan}
                disabled={isScanning}
                className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                {isScanning ? (
                  <div className="flex items-center">
                    <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
                    扫描中...
                  </div>
                ) : (
                  '开始扫描'
                )}
              </button>
            </div>
          ) : (
            <div className="space-y-6">
              {/* Special visitor alert */}
              {visitorInfo.isSpecial && (
                <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
                  <div className="flex items-center">
                    <AlertTriangle className="h-5 w-5 text-yellow-600 dark:text-yellow-400 mr-2" />
                    <span className="font-medium text-yellow-800 dark:text-yellow-200">
                      特殊访客 - {visitorInfo.specialType}
                    </span>
                  </div>
                </div>
              )}

              {/* Visitor information */}
              <div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-6">
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">访客信息</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="flex items-center">
                    <User className="h-5 w-5 text-gray-400 mr-3" />
                    <div>
                      <p className="text-sm text-gray-600 dark:text-gray-400">访客姓名</p>
                      <p className="font-medium text-gray-900 dark:text-white">{visitorInfo.name}</p>
                    </div>
                  </div>
                  <div className="flex items-center">
                    <Phone className="h-5 w-5 text-gray-400 mr-3" />
                    <div>
                      <p className="text-sm text-gray-600 dark:text-gray-400">手机号码</p>
                      <p className="font-medium text-gray-900 dark:text-white">{visitorInfo.phone}</p>
                    </div>
                  </div>
                  <div className="flex items-center">
                    <User className="h-5 w-5 text-gray-400 mr-3" />
                    <div>
                      <p className="text-sm text-gray-600 dark:text-gray-400">被访人</p>
                      <p className="font-medium text-gray-900 dark:text-white">{visitorInfo.visitedPerson}</p>
                    </div>
                  </div>
                  <div className="flex items-center">
                    <Phone className="h-5 w-5 text-gray-400 mr-3" />
                    <div>
                      <p className="text-sm text-gray-600 dark:text-gray-400">被访人电话</p>
                      <p className="font-medium text-gray-900 dark:text-white">{visitorInfo.visitedPhone}</p>
                    </div>
                  </div>
                  <div className="flex items-center">
                    <Clock className="h-5 w-5 text-gray-400 mr-3" />
                    <div>
                      <p className="text-sm text-gray-600 dark:text-gray-400">预约时间</p>
                      <p className="font-medium text-gray-900 dark:text-white">{visitorInfo.visitTime}</p>
                    </div>
                  </div>
                  <div className="flex items-center">
                    <MessageSquare className="h-5 w-5 text-gray-400 mr-3" />
                    <div>
                      <p className="text-sm text-gray-600 dark:text-gray-400">访问事由</p>
                      <p className="font-medium text-gray-900 dark:text-white">{visitorInfo.purpose}</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Action buttons */}
              <div className="flex space-x-4">
                <button
                  onClick={handleApprove}
                  className="flex-1 flex items-center justify-center px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 transition-colors"
                >
                  <CheckCircle className="h-5 w-5 mr-2" />
                  允许通行
                </button>
                <button
                  onClick={() => setShowRejectModal(true)}
                  className="flex-1 flex items-center justify-center px-4 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 transition-colors"
                >
                  <XCircle className="h-5 w-5 mr-2" />
                  拒绝通行
                </button>
              </div>

              {/* New scan button */}
              <div className="text-center pt-4 border-t border-gray-200 dark:border-gray-700">
                <button
                  onClick={() => setVisitorInfo(null)}
                  className="px-4 py-2 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"
                >
                  扫描下一个二维码
                </button>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Reject modal */}
      {showRejectModal && (
        <div className="fixed inset-0 bg-gray-600 bg-opacity-75 flex items-center justify-center z-50">
          <div className="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md mx-4">
            <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
              拒绝原因
            </h3>
            <textarea
              value={rejectReason}
              onChange={(e) => setRejectReason(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
              rows={4}
              placeholder="请输入拒绝通行的具体原因..."
            />
            <div className="flex space-x-3 mt-6">
              <button
                onClick={() => setShowRejectModal(false)}
                className="flex-1 px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-600 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors"
              >
                取消
              </button>
              <button
                onClick={handleReject}
                className="flex-1 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"
              >
                确认拒绝
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};